<template>
	<div class="app-container">
		<el-row>
			<div class="editBtnWp">
				<el-button type="primary" size="small" @click="toEdit(noticeId)">编辑</el-button>
			</div>
			<div class="edit">
				<el-form label-width="150px">
					<el-form-item label="公告标题：" class="items">
		            	<div>{{formLabel.title}}</div>
		          	</el-form-item>
		          	
		          	<!--指定组织-->
		          	<el-form-item label="发布到以下机构：" class="items" prop="organizationUnitTree">
		            	<!-- <div class="orgsWp">
		            		<a class="orgstreeA" @click="openOrg()">共关联&nbsp;{{orgsLen}}&nbsp;个组织</a>
		            	</div> -->
						<ztree-select  :viewinfo="true" @change="selectChange" class="wd500" v-model="treeArr"  multiple :treedata="organizationUnitTree" :childprops="childprops"></ztree-select>
		          	</el-form-item>
		          	
		          	<!--树形-->
		          	<!-- <el-dialog title="指定组织" :visible.sync="dialogVisible" width="560px" :before-close="handleClose" :close-on-click-modal="false">
					  	<div class="dialogHei">
			              <el-tree :data="organizationUnitTree" show-checkbox node-key="id" :default-expand-all='true' :default-checked-keys="treeArr" :props="defaultProps" ref="tree" disabled :check-strictly="true">
			              </el-tree>
					  </div>
					</el-dialog> -->
		          	
		          	<!--公告内容-->
		          	<el-form-item label="公告内容：" class="items" prop="content">
		            	<div class="detailsWP" v-html="formLabel.content">
		            	</div>
		          	</el-form-item>
					
				</el-form>
			</div>
		</el-row>
	</div>
</template>

<script>
import ztreeSelect from "@/components/z-select/index.vue";
	export default{
		components:{
     		 ztreeSelect
		},
		data(){
			return{
				//数组子级相关参数
				childprops: {
					name: "displayName", //显示名字
					children: "orgs", //子级字段名
					lv: "depth" //当前层级
				},
				// disabled:true,
				noticeId:null,
				formLabel:{},
				orgsLen:0,
				totalCount:null,
				// defaultProps: {
			    //   children: 'organizationUnits',
			    //   label: 'displayName',
			    //   disabled: 'displayName'
			    // },
			    dialogVisible:false,
			    
			    organizationUnitTree: [],
			    treeArr:[],//选中的树
		     	openTree: false,
			}
		},
		mounted(){
			//new Promise(function(resolve, reject) {
              this.getTree();
            //   resolve("ddd");
          //  }).then(function(data) {
			 
				this.getInfo();

			//  })
		},
		methods:{
			//得到权限集合
			treearray(data) {
				console.log(data)
				var treeArr = [];
				var treeNames = [];
				data.map(function (item) {
					
					if (item.isCheck) {
						treeArr.push(item.id)
						treeNames.push(item.fullName)
					}
					console.log(item.organizationUnits.length)
					if (item.organizationUnits&&item.organizationUnits.length > 0) { //遍历2级
						
						item.organizationUnits.map(function (elem) {
							if (elem.isCheck) {
								console.log(item.id + 'yiyiyi')
								treeArr.push(elem.id)
								treeNames.push(elem.fullName)
							}
							if (elem.organizationUnits&&elem.organizationUnits.length > 0) { //遍历3级
								elem.organizationUnits.map(function (obj) {
									if (obj.isCheck) {
										treeArr.push(obj.id)
										treeNames.push(obj.fullName)
									}
		
									if (obj.organizationUnits&&obj.organizationUnits.length > 0) { //遍历4级
										obj.organizationUnits.map(function (last) {
											if (last.isCheck) {
												treeArr.push(last.id)
												treeNames.push(last.fullName)
											}
											//遍历3级
										})
									}
								})
							}
						})
					}
				})
				this.orgsLen = treeArr.length;
				return {treeArr,treeNames};
			},
			getInfo(){
				let that = this;
				//this.noticeId='46b59072-ce6b-45c7-8715-3e2e5cfdedda';
				this.noticeId = this.$route.params.id;
				this.totalCount = this.$route.params.total;
				let params = {id:this.noticeId};
				this.post(params,'services/app/notice/GetNoticeDetail').then(res=>{
					if (res.success) {
						console.log('suc');
						console.log(res);
						that.formLabel=res.result;						
						that.formLabel.title = res.result.title
	          			that.formLabel.content = res.result.content
	          			// that.organizationUnitTree = res.result.organizationUnitTree
	          			that.treeArr =  res.result.organizationUnitTree
					}
				});
			},
			getTree() {
		      let params={
					"queryType": 0
				}
		      this.post(params, 'services/app/common/GetCurrentOrganizationUnitsByType').then(rs => {
		        console.log('-----------')
		        // console.log(rs)
		        if (rs.success) {
				  let arr = [];
				  arr.push(rs.result);
		          this.organizationUnitTree = arr;
		          console.log(this.organizationUnitTree)
		        }
		      })
			},
			selectChange(val){
				console.log(val);
			},
			// 树值
		    // getCheckedNodes() {
		    //   // console.log(this.$refs.tree.getCheckedNodes())
		    //   this.orgs = this.$refs.tree.getCheckedNodes()
		    //   this.treename = [];
		    // },
		    // getCheckedKeys() {
		    //   this.openTree = false
		    //   this.getCheckedNodes()
		    //   // console.log(this.$refs.tree.getCheckedKeys())
		    //   this.treeSelect = this.$refs.tree.getCheckedKeys()
		    //   if(this.$refs.tree.getCheckedKeys().length == 0){
		    //     this.formLabel.orgs= [];
		    //   }else{
		    //     this.formLabel.orgs=this.treeSelect
		    //   }
		    // },
			openOrg(){
				
				this.dialogVisible=true;
				
			},
			toEdit(id){
				this.$router.push({
	        		name:'announceedit',
	        		params:{
		        		id:id
		        	}
	        	})
			}
			
		}
	}
	
</script>

<style lang="scss" scoped>
	.app-container{
		padding: 10px;border: 0;
		.editBtnWp{
			text-align: right;margin-bottom: 15px;
		}
		.wd230{width: 230px;display: block;}
		.wd720{width: 720px;display: block;}
		.items{clear: both !important;display: block;margin-bottom: 5px !important;color: #666666;}
		.orgstreeP{margin: 0 !important;}
		.orgstreeSp{padding-right: 40px;}
		.detailsWP{
			width: 700px;
		}
		.dialogHei{height: 405px;overflow-y: auto;}
		.orgstreeA{color: #169bd5;}
	}
</style>
<style type="text/css">
	.detailsWP p{margin: 0 !important;}
</style>